<template>
  <div class="app-container">
    <div>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['feedback:feedback:add']"
          >回复</el-button
        >
      </el-col>
    </div>

    <!-- 添加或修改问题反馈对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="反馈id" prop="feedbackId">
          <el-input v-model="formaa.feedbackId" placeholder="请输入反馈id" disabled />
        </el-form-item>
        <el-form-item label="反馈标题" prop="feedbackTitle">
          <el-input v-model="formaa.feedbackTitle" placeholder="请输入反馈标题" />
        </el-form-item>
        <el-form-item label="反馈内容">
          <wang-editor v-model="formaa.feedbackContent" :min-height="192" />
        </el-form-item>
        <el-form-item label="反馈时间" prop="feedbackTime">
          <el-date-picker
            clearable
            v-model="formaa.feedbackTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择反馈时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="反馈人" prop="createBy">
          <el-input v-model="formaa.createBy" placeholder="反馈人" />
        </el-form-item>
        <el-form-item label="反馈类型" prop="createType">
          <el-input v-model="formaa.createType" placeholder="反馈类型：1.反馈" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <div class="">
      <template>
        <el-table :data="feedbackMain" style="width: 100%">
          <el-table-column prop="createBy" label="反馈人" width="180">
          </el-table-column>
          <el-table-column prop="feedbackContent" label="反馈内容" width="180">
          </el-table-column>
          <el-table-column prop="feedbackTime" label="反馈时间">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import { getFeedback,addFeedback } from "@/api/feedback/feedback";
import { deptTreeSelect } from "@/api/system/user";
import "@wangeditor/editor/dist/css/style.css";

export default {
  name: "feedback",
  data() {
    return {
      // 遮罩层
      loading: true,

      feedbackMain: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      formaa:{
        feedbackId:'',
        feedbackTitle:'',
        feedbackContent:'',
        feedbackTime:'',
        createBy:'',
        createType:'2',
      },
      a:'',
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.a = this.$route.params.feedbackId
    const feedbackId = this.$route.params && this.$route.params.feedbackId;
    this.getfeedbackById(feedbackId);
  },

  methods: {
    getfeedbackById(feedbackId) {
      getFeedback(feedbackId).then((res) => {
        this.formaa.feedbackId = this.a
        console.log(res), (this.feedbackMain = res.data);
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加问题反馈";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateFeedback(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getfeedbackById();
            });
          } else {
            
            addFeedback(this.formaa).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getfeedbackById(this.formaa.feedbackId);
            });
          }
        }
      });
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      let html = editor.getHtml();

      // 创建一个新的DOM解析器
      let parser = new DOMParser();

      // 使用解析器解析HTML字符串
      let doc = parser.parseFromString(html, "text/html");

      // 获取所有的表格元素
      let tables = doc.getElementsByTagName("table");

      // 遍历所有的表格元素并添加边框样式
      for (let i = 0; i < tables.length; i++) {
        tables[i].style.borderTop = "1px solid #ccc";
        tables[i].style.borderLeft = "1px solid #ccc";

        // 获取表格中的所有td和th元素
        let cells = tables[i].querySelectorAll("td, th");

        // 遍历所有的td和th元素并添加边框样式
        for (let j = 0; j < cells.length; j++) {
          cells[j].style.borderBottom = "1px solid #ccc";
          cells[j].style.borderRight = "1px solid #ccc";
          cells[j].style.padding = "3px 5px";
          cells[j].style.textAlign = "center";
        }

        // 获取表格中的所有th元素并添加边框样式
        let ths = tables[i].querySelectorAll("th");
        for (let k = 0; k < ths.length; k++) {
          ths[k].style.borderBottom = "1px solid #ccc";
        }
      }

      // 将修改后的HTML内容转换回字符串
      html = new XMLSerializer().serializeToString(doc);

      // 更新编辑器的HTML内容
      this.html = html;
    },
  },
};
</script>

<style lang="scss" scoped>
.noticeTitle {
  font-size: 28px;
  word-wrap: break-word;
  color: #222226;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
}
.notice {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.createBy {
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 30px;
  padding: 5px;
  display: flex;
  position: relative;
  align-items: center;
  background: #f8f8f8;
  border-radius: 4px;
  .font {
    padding: 5px;
    color: #999aaa;
    margin-right: 20px;
  }
}
/* table 样式 */
.notice.table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.notice.table td,
.notice.table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.notice.table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.notice.blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
</style>

